<template>
	<el-container style="flex-direction: column;">
		<el-table :data="users" stripe border highlight-current-row :row-class-name="tableRowClassName" @select="handleSelect">
			<el-table-column type="selection" width="55"></el-table-column>
			<el-table-column prop="id" label="编号"></el-table-column>
			<el-table-column prop="username" label="姓名"></el-table-column>
			<el-table-column prop="password" label="密码"></el-table-column>
		</el-table>
		<el-container style="justify-content: space-between;">
			<el-button-group>
				<el-button>新增</el-button>
				<el-button>修改</el-button>
				<el-button @click="handleRemove">删除</el-button>
			</el-button-group>
			<el-pagination 
				layout="total, sizes, prev, pager, next, jumper"
				:page-sizes="[5, 15, 50, 100]" :current-page="pageNum" :page-size="pageSize" :total="total" 
				@current-change="handleCurrentChange" @size-change="handleSizeChange">
			</el-pagination>
		</el-container>
	</el-container>
</template>

<script>
import { IRequest, IMessageBoxRequest } from '@/utils/request'
import { IMessage, IMessageBox } from '@/utils/notice'

export default {
     data(){
        return {
            users: [],
            pageSize: 5,
            pageNum: 1,
			total: 0,
            selections: []
        }
    },
	mounted: function(){
		this.getList();
	},
	methods: {
		getList(){
			IRequest({
				method: 'get',
				url: '/user/',
				params: { pageNum: this.pageNum, pageSize: this.pageSize }
			}).then(response => {
				this.users = response.data.records
				this.total = response.data.total
			})
		},
        handleCurrentChange(val){
			this.pageNum = val
			this.getList()
		},
		handleSizeChange(val){
			this.pageSize = val
			this.getList()
		},
		handleRemove(){
            IMessageBoxRequest({
                message: '是否确定删除用户？',
                url: `/user/${this.selections[0].id}`,
                method: 'delete'
            }).then(response => {
                IMessage({message: response.message, type: 'success'})
                this.getList()
            })
		},
        tableRowClassName({row, index}){
            // console.log('row')
            // console.log(row)
            // console.log(index)
        },
        handleSelect(selection){
            this.selections = selection
        },
		
	}
}
</script>

<style lang="scss" scoped>

</style>